<template>
	<view class="main" @click.stop>
		<view class="input">
			<textarea type="text" v-model="msg" placeholder="这一刻的想法..." maxlength='100' />
		</view>
		<view class="picker">
			<uni-file-picker
				ref="files"
				v-model="imageValue"
				:limit="9"
				mode="grid"
				file-mediatype="image"
				:auto-upload="false"
				cloudPath="chatImg"
				@select="select"
				@progress="progress"
				@success="success"
				@fail="fail"
				
				:image-styles="imageStyles"
			></uni-file-picker>
		</view>
		<view class="btn_box"><view class="btn" @click.stop="sent">
			<text style="font-size: 32rpx;color: white;">发送</text>
		</view></view>
		
	</view>
</template>

<script>
export default {
	name: 'takeImages',
	data() {
		return {
			imageValue: [],
			imageStyles: {
				width: 100,
				height: 100,
				border: {
					color: '#CCC',
					width: 2,
					style: 'dashed',
					radius: '8rpx'
				}
			},
			msg:''
		};
	},
	mounted() {
		this.$refs.files.choose();
	},
	methods: {
		select(e) {
			console.log('select',e,this.imageValue);
		},
		progress(e) {
			console.log('progress',e);
		},
		success(e){
			const medias=e.tempFiles.map(item=>({url:item.url,fileID:item.fileID}))
			const msgs={content:this.msg, paths:medias}
			this.$emit('images',msgs)
			console.log('success',e);
		},
		fail(e){
			console.log('fail',e);
		},
		sent(){
		    
			this.$refs.files.upload()
		}
	}
};
</script>

<style lang="scss" scoped>
.main {
	background-color: #fff;
	position: fixed;
	top: 180rpx;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 888;
	display: flex;
	flex-direction: column;
	
}
.input {
	height: 200rpx;
	margin: 20rpx 30rpx;
}
.picker {
  display: flex;
  padding: 10px;
  padding-top: 0;
  flex-direction: row;

}
.btn_box{
	display: flex;
	flex-direction: row;
	justify-content: center;
}
.btn{
	display: flex;
	flex-direction: row;
	align-items: center;
    margin-top: 50rpx;
	justify-content: center;
	width: 200rpx;
	padding: 20rpx 50rpx;
	border-radius: 50%;
	background-color: #55aaff;
}
</style>
